<template>
    <div class="message" ref="aaa">
        <div :class="['msg',{action:item.id===abc}]" v-for="item in arr" :key="item.id" :style="`left:${item.left}px;top:${item.top}px`"   @mousedown.prevent="aaaa(item.id)">
            <div class="name">{{item.name}}
                <div class="del" @click="DEL(item)">x</div>
            </div>
            <div class="content">{{item.content}}</div>
        </div>
    </div>

</template>
<script>
import { mapActions,mapState,mapGetters, mapMutations } from 'vuex';
    export default{
        data () {
            return {
                abc:''
            }
        },
        methods: {
            ...mapActions('message',['GETMSG']), 
            ...mapActions('box',['DEL']),
            ...mapMutations('message',['GETMSGS']),
            aaaa(a){
                this.abc=a
            }
        },
        mounted(){
            this.GETMSG()
            this.$refs.aaa.onmousedown=(e)=>{
                //鼠标点击元素的宽度
                // console.log(e.target.offsetWidth)
                //鼠标点击时距离页面左侧的距离
                // console.log(e.pageX);
                //鼠标点击时距离点击元素左侧的距离
                // console.log(e.offsetX);
                //获取鼠标点击元素距离其父元素左侧的距离
                // console.log(e.target.parentNode.offsetLeft);
                // console.log(e.target);
                let c = e.offsetX
                let d = e.offsetY
                // console.log(c);
                document.onmousemove = (e)=>{
                    let a=e.pageX-e.target.parentNode.parentNode.offsetLeft-c
                    let b=e.pageY-e.target.parentNode.parentNode.offsetTop-d
                    if(a<=0){
                        a=0
                    }
                    if(b<=0){
                        b=0
                    }
                    if(a>=e.target.parentNode.parentNode.offsetWidth-e.target.parentNode.offsetWidth){
                        a=e.target.parentNode.parentNode.offsetWidth-e.target.parentNode.offsetWidth
                    }
                    if(b>=e.target.parentNode.parentNode.offsetHeight-e.target.parentNode.offsetHeight){
                        b=e.target.parentNode.parentNode.offsetHeight-e.target.parentNode.offsetHeight
                    }
                    e.target.parentNode.style.left=a+'px'
                    e.target.parentNode.style.top=b+'px'
                }
                this.$refs.aaa.onmouseup=(e)=>{
                    document.onmousemove=null
                }
            }
        },
        computed:{
            ...mapState('message',['arr']),
        },
    }




</script>
<style scoped>
    .message{
        width: 1000px;
        height: 500px;
        background-color: rgba(229, 224, 143, 0.8);
        position: relative;
        left: 50%;
        margin-left:-500px;
        display: flex;
        flex-wrap: wrap;
    }
    .msg{
        width: 150px;
        height: 100px;
        background-color: bisque;
        position: absolute;
    }
    .action{
        z-index: 100;
    }
    .name{
        width: 150px;
        height: 20px;
        background-color: chartreuse;
        
    }
    .content{
        width: 150px;
        height: 80px;
        word-break: break-all;
    }
    .del{
        float: right;
        width: 16px;
        height: 16px;
        background-color: pink;
        text-align: center;
        line-height: 16px;
        margin-top: 3px;
    }

</style>